<template>
<div style="height: 700px">
  <el-row v-if="operationType==='insert'" justify="center">
      <h1>景点录入</h1>
  </el-row>
  <el-row v-else justify="center"><h1>景点编辑</h1></el-row>
<el-row justify="center">
  <el-card style="min-height: 400px;"  shadow="never">
    <el-form
        :model="scenicInfo"
        :rules="rules"
        ref="scenicInfo"
        label-width="100px"
        class="demo-ruleForm"
    >
      <el-form-item label="景点名称" prop="scenicName">
        <el-input placeholder="请输入景点名称" show-word-limit v-model="scenicInfo.scenicName" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item label="景点描述" prop="scenicDescription">
        <el-input placeholder="请输入景点介绍信息"  autosize  type="textarea" v-model="scenicInfo.scenicDescription" maxlength="500" show-word-limit></el-input>
      </el-form-item>
      <el-form-item label="景点类型" prop="scenicType">
        <el-radio-group v-model="scenicInfo.scenicType">
          <el-radio label="LAKE">湖</el-radio>
          <el-radio label="HILL">山</el-radio>
          <el-radio label="FLOWER">花</el-radio>
          <el-radio label="TREE">树</el-radio>
          <el-radio label="KIOSK">亭</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="景点配图" prop="imageList">
        <el-upload
            class="upload-demo"
            ref="upload"
            :action="`${urlUpload}/oss/uploadFile`"
            :before-upload="beforeUpload"
            :file-list="imageList"
            :auto-upload="false"
            list-type="picture"
            multiple
            :limit=4
            :on-exceed="exceed"
            :on-success="submitSuccess"
            :on-error="errorUpload"
        >
          <template  #trigger>
            <el-button size="small" type="primary">选取图片</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png/jpeg文件，且不超过1MB,最大数量4张</div>
          </template>
          <el-button
              style="margin-left: 10px;"
              size="small"
              type="success"
              @click="submitUpload"
          >上传到服务器</el-button>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-button :loading="loading" @click="submitForm" type="primary">提交</el-button>
    <el-popconfirm
        confirmButtonText="确定"
        cancelButtonText="取消"
        title="此操作将会清空表单内容，确定继续吗"
        @confirm="confirmEvent"
    >
      <template #reference>
        <el-button type="primary">重置</el-button>
      </template>
    </el-popconfirm>
  </el-card>
</el-row>
</div>
</template>

<script>
import {insertImage, insertScenicInfo} from "@/api/multimedia";
import {baseURLMulti} from "@/setting";
export default {
  name: "scenicInsertOrUpdate",
  props:{
    operationType:{
      type:String,
      default:''
    },
    scenic:{
      type:Object,
      default: {
        scenicName:'',
        scenicDescription:'',
        scenicType:'LAKE',
        imageList:[]
      }
    }
  },
  mounted() {
    if (this.scenic!==''){
      this.scenicInfo=this.scenic
    }
  },
  data(){
    return{
      urlUpload:baseURLMulti,
      loading:false,
      imageList:[],
      scenicInfo:{
        scenicName:'',
        scenicDescription:'',
        scenicType:'LAKE',
        imageList:[]
      },
      rules:{
        scenicName:[{required:true,message: '景点名称不能为空', trigger: 'blur'}],
        scenicDescription:[{required:true,message: '景点描述不能为空', trigger: 'blur'}]
      },
    }
  },
  methods:{
    //图片上传之前调用
    beforeUpload(file){
      const isJPG = file.type === 'image/jpeg'||file.type === 'image/jpg' ||file.type==='image/png'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG||!isLt2M) {
        this.$message({
          type:'warning',
          message:'上传头像图片只能是 jpg、jpeg 格式,并且上传头像图片大小不能超过 1MB!'
        })
        return false
      }
      return true
    },
    //图片上传成功
    submitSuccess(response, file, fileList){
      this.scenicInfo.imageList.push(response.data.imageUrl)
    },
    //图片上传失败
    errorUpload(){
      this.$message({
        type:'error',
        message:'图片上传失败，请检查网络后重试'
      })
    },
    //图片上传方法
    submitUpload(){
      this.$refs.upload.submit()
    },

    //图片数量超出限制
    exceed(){
      this.$message({
        type:'warning',
        message:'最大只能上传4张图片'
      })
    },
    submitForm(){
      this.$refs.scenicInfo.validate((valid) =>{
        if (valid){
          if (this.scenicInfo.imageList.length<1){
            this.$message({
              type:'error',
              message:'请先将景点配图上传至服务器'
            })
            return
          }
          //文本
          const form={
            scenicName:this.scenicInfo.scenicName,
            scenicDescription:this.scenicInfo.scenicDescription,
            scenicType:this.scenicInfo.scenicType
          }
          //图片
          const imageForm={
            imageType:'SCENIC',
            imageName:this.scenicInfo.scenicName,
            imageList:this.scenicInfo.imageList,
            scenicId:undefined
          }
          this.loading=true
          //添加数据
          insertScenicInfo(form).then(res=>{
            if (res.data.scenicId==='no'){
              this.loading=false
              return
            }

            //文本插入成功，插入图片
            imageForm.scenicId=res.data.scenicId
            insertImage(imageForm).then(()=>{
              this.$notify({
                type:'success',
                message:'景点录入成功'
              })
              this.loading=false
              this.confirmEvent()
            })
          }).catch(()=>{
            this.loading=false
            this.$notify({
              type:'error',
              message:'景点录入失败'
            })
          })
        }else {
          this.loading=false
        }
      })
    },
    confirmEvent(){
      this.scenicInfo.scenicName=''
      this.scenicInfo.scenicDescription=''
      this.scenicInfo.scenicType='LAKE'
      this.scenicInfo.imageList=[]
      this.imageList=[]
    }
  }
}
</script>

<style scoped>
.demo-ruleForm{
margin: auto;
}
</style>
